<template>
	<view class="containner">
		<view class="suggest-type">
			<view class="title">反馈类型</view>
			<view class="list">
				<view class="item" :class="{'active':typeIndex === index}" v-for="(item,index) in types" :key="index"
					@click="handleClickType(item,index)">
					{{ item.title }}
				</view>
			</view>
		</view>
		<view class="suggest-content">
			<view class="title">反馈内容</view>
			<u--textarea v-model="content" placeholder="请输入反馈内容"></u--textarea>
			<view class="upload-box">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"><image src="http://qiniu.disciplineeducation.com/studyIcons/add-file.png" class="add-file"></image></u-upload>
			</view>
		</view>
		<view class="suggest-service">
			<view class="title">如有问题联系微信</view>
			<view class="wechart">
				<view class="code">微信：17610455091</view>
				<view class="copy" @click="handleClickCopy">复制</view>
			</view>
		</view>
		<view class="toolbar">
			<view class="button" @click="handleClickButton">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeIndex: 0,
				content: '',
				type: 1,
				types: [{
					title: '功能建议',
					id: '1'
				}, {
					title: '使用说明',
					id: '2'
				}, {
					title: '内容相关',
					id: '3'
				}],
				fileList:[],
				formData:{
					token:'',
					key:''
				},
				qiniuApi:'https://up-z1.qiniup.com',
				qiniuPreviewUrl:'http://qiniu.disciplineeducation.com/',
				timmer:null
			}
		},
		onShareAppMessage(res){
			return this.$utils.onShareAppMessage();
		},
		onLoad(options) {
			this.getQiniuToken();
		},
		methods: {
			async getQiniuToken(){
				const res = await this.$http.get(`/admin/uptoken`)
				this.formData.token = res.data.uptoken;
			},
			async onConmit(){
				let list = [];
				this.fileList.forEach(item=>{
					list.push(item.url)
				})
				const res = await this.$http.post(`/wechatmini/feedback`,{
					type:this.type,
					content:this.content,
					images:list.join(',')
				})
				if(res.code == 0){
					uni.showToast({
						title:'提交成功',
					})
					let self = this;
					this.timmer = setTimeout(()=>{
						clearTimeout(self.timmer);
						uni.redirectTo({
							url:`/pages/my/index`
						})
					},1500)
					return false;
				}
			    
				this.typeIndex = 0;
				this.type = 1;
				this.content='';
				this.fileList = []
			},
			handleClickType(item, index) {
				this.typeIndex = index;
				this.type = item.id;
			},
			handleClickCopy() {
				uni.setClipboardData({
					data: '17610455091',
					success: function(res) {

					}
				})
			},
			handleClickButton() {
				if(this.content === ""){
					uni.showToast({
						icon:'none',
						title:'请输入反馈内容'
					})
					return false;
				}
				this.onConmit();
			},
			//删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			createKey(){
				let date = new Date();
				let year = date .getFullYear();
				let month = date .getMonth() + 1;
				let day = date .getDate(); 
				return `${year}/${month}/${year}_${month}_${day}_`
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					this.formData.key = this.createKey() + new Date().getTime();
					const result = await this.uploadFilePromise(lists[i].url)
					let url = JSON.parse(result.data).key;
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.qiniuPreviewUrl + url
					}))
					fileListLen++
					console.log(this.fileList)
				}
			},
			uploadFilePromise(url) {
				let self = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: self.qiniuApi, 
						filePath: url,
						name: 'file',
						formData: self.formData,
						success: (res) => {
							resolve(res)
						}
					});
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.suggest-type {
		margin-bottom: 20rpx;
		padding: 30rpx;
		background-color: #fafafa;

		.title {
			color: #706e76;
			margin-bottom: 20rpx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			.item {
				border: 1px solid #bcbdd2;
				border-radius: 40rpx;
				padding: 10rpx 20rpx;
				color: #706e76;
				margin-right: 20rpx;
			}

			.item:last-child {
				margin-right: 0
			}

			.item.active {
				border: 1px solid #8f8fd9;
				color: #8f8fd9
			}
		}
	}

	.suggest-content {
		margin-bottom: 20rpx;
		padding: 30rpx;
		background-color: #fafafa;

		.title {
			color: #706e76;
			margin-bottom: 20rpx;
		}
		.upload-box{
			margin-top:20rpx
		}
	}

	.suggest-service {
		margin-bottom: 20rpx;
		padding: 30rpx;
		background-color: #fafafa;

		.title {
			color: #706e76;
			margin-bottom: 20rpx;
		}

		.wechart {
			line-height: 1;
			display: flex;
			justify-content: space-between;
			color: #929096;
			margin-top: 20rpx;
		}

	}

	.toolbar {
		padding: 60rpx;
	
	.button {
			height: 80rpx;
			line-height: 80rpx;
			background-color: #bcbdd2;
			color: #fff;
			text-align: center;
			border-radius: 40rpx;
			margin: 0 auto;
		}
	}

	.add-file {
		width: 160rpx;
		height: 160rpx;

		
	}
</style>
